<!--
 * @Author: krsea 965837746@qq.com
 * @Date: 2025-03-02 18:08:17
 * @LastEditors: krsea 965837746@qq.com
 * @LastEditTime: 2025-03-02 18:41:19
 * @FilePath: \2306\week3t\1.组件的基本使用( 创建一个简单的全局组件和局部组件) copy.html
 * @Description: 
 * 
 * Copyright (c) 2025 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>组件的基本使用</title>
</head>
<body>
    <div id="app">
        <!-- 使用全局组件 -->
        <global-component></global-component>
        <!-- 使用局部组件 -->
        <local-component></local-component>
    </div>

    <div id="app1">
        <!-- 使用全局组件 -->
        <global-component></global-component>
        <!-- 使用局部组件 -->
        <local-component></local-component>
    </div>

    <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script>
        // 全局组件
        Vue.component('global-component', {
            template: '<div>这是一个全局组件</div>'
        });

        // Vue 实例
        var app = new Vue({
            el: '#app',
            components: {
                // 局部组件
                'local-component': {
                    template: '<div>这是一个局部组件</div>'
                }
            }
        });

        var app1 = new Vue({
            el: '#app1',
            // components: {
            //     // 局部组件
            //     'local-component': {
            //         template: '<div>这是一个局部组件</div>'
            //     }
            // }
        });
    </script>
</body>
</html>
